<template>
  <div class="home-content">
    <div class="home-body">
      <!--    侧边栏-->
      <div class="nav-left">
        <sidebar></sidebar>
      </div>
      <!--    页面视图-->
      <div class="nav-right">
        <!--    头部-->
        <header-bar></header-bar>
        <div class="body-box">
          <router-view></router-view>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import sidebar from '../components/page/sidebar.vue'
import headerBar from '../components/page/headerBar.vue'

import { ref } from 'vue'


</script>

<style scoped lang="scss">
.home-content{
  position: relative;
}
.home-body{
  display: flex;
  .nav-left{}
  .nav-right{
    width: 100%;
    overflow: hidden;
    .body-box{
      height: calc(100vh - 120px);
      overflow-y: auto;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}
</style>